<template>
	<div>
		<Card class="content-card">
			<Tabs :animated="false">
				<TabPane label="系统设置--基本信息管理" name="info">
					<Form ref="formValidate" :model="formInline" :rules="ruleValidate" :label-width="100">
						<FormItem label="企业名称:" prop="factoryName">
							<Input v-model="formInline.factoryName" placeholder="最多20个汉字" :maxlength="20" />
						</FormItem>
						<FormItem label='联系人:' prop='factoryUser'>
							<Input v-model="formInline.factoryUser" />
						</FormItem>
						<FormItem label='手机:' prop='factoryTel'>
							<Input v-model="formInline.factoryTel" />
						</FormItem>

						<FormItem label='经营范围:' prop='factoryScope'>
							<Input v-model="formInline.factoryScope" type="textarea" />
						</FormItem>
						<FormItem label='地址' prop='factoryAddress'>
							<Input v-model="formInline.factoryAddress" placeholder="点击下面的地图进行地址选择" disabled />
						</FormItem>
						<div id="amap">

						</div>
						<FormItem>
							<Button type="primary" @click="submit">保存</Button>
						</FormItem>
					</Form>

				</TabPane>
			</Tabs>
		</Card>
	</div>

</template>

<script>
	export default {
		components: {},
		data() {
			return {
				factoryId: '',
				formInline: {
					factoryName: '',
					factoryUser: '',
					factoryTel: '',
					factoryScope: '',
					factoryAddress: '',
					longitude: '',
					latitude: ''
				},
				isEdit: false,


				ruleValidate: {
					factoryName: {
						required: true,
						message: '请输入企业名称'
					},
					factoryUser: {
						required: true,
						message: '请输入联系人'
					},
					factoryTel: {
						required: true,
						message: '请输入手机号'
					},
					factoryAddress: {
						required: true,
						message: '请输入地址'
					},
					factoryScope: {
						required: true,
						message: '请输入经营范围'
					}
				}
			}
		},
		created() {
			this.factoryId = sessionStorage.getItem("factoryId")
			this.getData()
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				const _this = this;
				this.map = new AMap.Map("amap");
				//地图选点
				var clickHandler = function(e) {
					if (_this.addressMark) {
						_this.map.remove(_this.addressMark);
					}
					_this.formInline.longitude = e.lnglat.lng;
					_this.formInline.latitude = e.lnglat.lat;
					_this.addressMark = new AMap.Marker({
						position: e.lnglat, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
						title: _this.formInline.factoryAddress,
					});

					_this.map.add(_this.addressMark);

					//经纬度转地址
					AMap.plugin("AMap.Geocoder", function() {
						var geocoder = new AMap.Geocoder({});

						geocoder.getAddress(e.lnglat, function(status, result) {
							if (status === "complete" && result.info === "OK") {
								// result为对应的地理位置详细信息
								_this.formInline.factoryAddress =
									result.regeocode.formattedAddress;
							}
						});
					});
				};

				// 绑定事件
				_this.map.on("click", clickHandler);
			},
			getData() {
				//编辑
				if (this.factoryId) {
					this.$http.post('/partsfactory/queryId', {
						id: this.factoryId
					}).then(res => {
						if (res.status == 200) {
							if (res.data.code == 200) {
								this.formInline = {
									factoryName: res.data.data.factoryName,
									factoryUser: res.data.data.factoryUser,
									factoryTel: res.data.data.factoryTel,
									factoryScope: res.data.data.factoryScope,
									factoryAddress: res.data.data.factoryAddress,
									longitude: res.data.data.longitude,
									latitude: res.data.data.latitude
								}

							}

						}

					})
				}
			},
			//提交
			submit() {
				this.$refs['formValidate'].validate((valid) => {
					if (valid) {
						let data = {
							factoryName: this.formInline.factoryName,
							factoryUser: this.formInline.factoryUser,
							factoryTel: this.formInline.factoryTel,
							factoryScope: this.formInline.factoryScope,
							factoryAddress: this.formInline.factoryAddress,
							factoryId: this.factoryId,
							longitude: this.longitude,
							latitude: this.latitude

						}
						let url = '/partsfactory/update'
						this.$http.post(url, data).then(res => {
							if (res.status == 200) {
								if (res.data.code == 200) {
									this.$Message.success('操作成功')

								}

							}
						})
					}

				})

			},
			handleReset(name) {
				this.$refs[name].resetFields();
			}
		}
	}
</script>
<style scoped>
	.uploadSuccess {
		width: 200px;
		height: 100px;
	}

	.ivu-input-wrapper {
		width: 20%;
	}

	.ivu-btn-ghost {
		color: #000000;
	}

	#amap {
		margin-left: 20px;
		width: 40%;
		height: 500px;
	}
</style>
